<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>添加轮播图管理 | {$system_name}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="{_ADMIN_STATIC_}/i/favicon.png">
    <link rel="stylesheet" href="{_ADMIN_STATIC_}/css/amazeui.min.css" />
    <link rel="stylesheet" href="{_ADMIN_STATIC_}/css/admin.css">
    <link rel="stylesheet" href="{_ADMIN_STATIC_}/css/app.css">

</head>

<body data-type="index">
    <!-- 头部导航栏 -->
    {include file='public/header'}
    <!-- 左侧侧边栏 -->
    {include file='public/side'}
    <!-- 中间内容开始 -->

    <!-- 标题 -->
    <div class="tpl-content-page-title">
        {$system_name} -- 添加轮播图
    </div>
    <!-- 面包屑导航 -->
    <ol class="am-breadcrumb">
        <li><a href="{:url('Slideshow/index')}" class="am-icon-home">轮播图管理</a></li>
        <li>添加轮播图</li>
    </ol>

    <div class="tpl-content-scope">

        <!-- 白色区域内容 -->
        <div class="tpl-portlet-components">
            <div class="tpl-block ">
                <div class="am-g tpl-amazeui-form"> 
                    <div class="am-u-sm-12 am-u-md-9" style="height: 1000px;">
                        <div class="am-form am-form-horizontal">

                            <!-- 轮播图的标题 -->
                            <div class="am-form-group">
                                <label for="title" class="am-u-sm-3 am-form-label">轮播图的标题 / Title</label>
                                <div class="am-u-sm-9">
                                    <input type="text" id="title" value="{$slideshow_info.title}"
                                        placeholder="轮播图的标题 / Title">
                                    <small></small>
                                </div>
                            </div>

                            <!-- 图片 -->
                            <div class="am-form-group" style="height: 100px; line-height: 100px;">
                                <label for="url" class="am-u-sm-3 am-form-label">上传图片 / Image</label>
                                <div class="am-u-sm-9">
                                    <div class="am-u-sm-3">
                                        <button type="button" class="am-btn am-btn-success"
                                            onclick="uploadImage()">上传图片</button>
                                        <input id="upload_image" type="file" onchange="UploadImg(this)"
                                            style="display: none;" accept="image/*" />
                                    </div>
                                    <div class="am-u-sm-3">
                                        <img id="slideshow_image" src="/storage/{$slideshow_info.img_path}"
                                            style="width: 100%;height: 100%;display: inline-block;">
                                    </div>
                                    <div class="am-u-sm-6">
                                        <small style="color: red;font-size: 18px;">* 必须添加的内容</small>
                                    </div>
                                </div>
                            </div>

                            <!-- 链接的文章 -->
                            <div class="am-form-group">
                                <label for="note" class="am-u-sm-3 am-form-label">链接文章 / Notice_id</label>
                                <div class="am-u-sm-9">
                                    <input id="notice_id" type="text" value="{$slideshow_info.notice_name}"
                                        list="notice_title">
                                    <datalist id="notice_title">
                                        {volist name="notice_data" id="row"}
                                        <option value="{$row.title}" data-id="{$row.id}"></option>
                                        {/volist}
                                    </datalist>
                                    <small></small>
                                </div>
                            </div>

                            <!-- 轮播图的状态 -->
                            <div class="am-form-group">
                                <label for="title" class="am-u-sm-3 am-form-label">轮播图的标题 / Title</label>
                                <div class="am-u-sm-9">
                                    <select id="status">
                                        <option value="1" {$slideshow_info.status == 1 ? 'selected':''} >禁用</option>
                                        <option value="2" {$slideshow_info.status == 2 ? 'selected':''} >启用</option>
                                    </select>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <div class="am-u-sm-9 am-u-sm-push-3">
                                    <button type="button" class="am-btn am-btn-primary" onclick="save()">更新轮播图</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>


    <!-- 中间内容结束 -->

    <script src="{_ADMIN_STATIC_}/lib/jquery/jquery.js"></script>
    <script src="{_ADMIN_STATIC_}/js/amazeui.min.js"></script>
    <script src="{_ADMIN_STATIC_}/js/app.js"></script>
    <script src="{_ADMIN_STATIC_}/lib/layer/layer.js"></script>
    <script>
        // 定义图片的参数
        var image_file = null;

        // 上传图片按钮
        function uploadImage() {
            $('#upload_image').click();
        }

        // 上传图片
        function UploadImg(obj) {
            // 获取上传的图片
            var file = obj.files[0];
            var reader = new FileReader();
            //读取文件过程方法
            reader.onload = function (e) {
                if (!/image/.test(file.type)) {
                    return layer.msg("[ " + file.name + "] 该文件类型不正确，请上传图片类型", { icon: 5, time: 5000 });
                }
                $('#slideshow_image').attr('src', e.target.result);
                image_file = file;
            }
            reader.readAsDataURL(file);
        }

        // 定义下拉列表
        var notice_id = "{$slideshow_info.nid}";
        // 下拉列表获取ID
        $("#notice_id").on("input", function () {
            var $options = $("#notice_title").children();
            for (var i = 0; i < $options.length; i++) {
                if ($options.eq(i).val().trim() == $("#notice_id").val().trim()) {
                    notice_id = $options.eq(i).attr("data-id");
                    break;
                } else {
                    notice_id = 0;
                }
            }
        });


        // 添加轮播图页面
        function save() {
            var image_file_url = "{$slideshow_info.img_path}";
            // 图片判断
            if (!image_file && (image_file_url == '')) {
                return layer.msg('轮播图的图片必须上传', { icon: 2, time: 1000 });
            }

            // 标题
            var title = $('#title').val().trim();
            //  下拉列表ID notice_id
            //  上传的图片 image_file
            // 轮播图状态
            var status = $('#status').val();

            // 提交表单
            var formData = new FormData();
            formData.append('id', "{$slideshow_info.id}");
            formData.append('title', title);
            formData.append('notice_id', notice_id);
            formData.append('image_file', image_file);
            formData.append('image_file_url', image_file_url);
            formData.append('status', status);

            $.ajax({
                url: "{:url('Slideshow/edit_slideshow')}",
                data: formData,
                type: "POST",
                dataType: "JSON",
                cache: false,
                processData: false,
                contentType: false,
                success: function (res) {
                    // 返回结果处理
                    if (res.code == 0) {
                        return layer.msg(res.msg, { icon: 1, time: 900 },function(){
                            location.reload();
                        });
                    } else {
                        return layer.msg(res.msg, { icon: 2, time: 900 });
                    }
                },
                error: function (data) {
                    return layer.msg("服务器异常，请检查", { icon: 2, time: 900 });
                }
            });
        }

        // 重定向
        function redirect_url(url) {
            window.location.href = url;
        }

    </script>
</body>

</html>